<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计数器</title>
    <style>
        body {
            text-align: center;
            margin-top: 50px;
        }

        .counter {
            font-size: 48px;
            margin: 20px;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            color: white;
            border-radius: 4px;
        }

        button:hover {
            opacity: 0.8;
        }

        .start {
            background-color: #4CAF50;
        }

        .pause {
            background-color: #f39c12;
        }

        .end {
            background-color: #e74c3c;
        }
    </style>
</head>

<body>
    <h1>简单计数器</h1>
    <div class="counter">0</div>
    <div>
        <button class="start">开始</button>
        <button class="pause">暂停</button>
        <button class="end">结束</button>
    </div>
</body>
<script>
    let count = 0;
    let timer = null;
    const counter = document.querySelector('.counter');

    document.querySelector('.start').addEventListener('click', function () {
        if (!timer) {
            timer = setInterval(function () {
                count++;
                counter.innerHTML = count;
            }, 1000);
        }
    });

    document.querySelector('.pause').addEventListener('click', function () {
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
    });

    document.querySelector('.end').addEventListener('click', function () {
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        count = 0;
        counter.innerHTML = count;
    });
</script>

</html>